input 支持搜索和输入 |
您所在的位置：网站首页 › jquery 监听input输入事件 › input 支持搜索和输入 |
|
需求：下拉搜索框+输入框 实现：用antd的组件改写 不说废话，直接上代码 { // 选中下拉时，也将下拉值作为输入框的值 setKeyword(val) // 绑定值到表单上 form.setFieldsValue({ wikiName: val }) }} filterOption={false} //必须加这个，否则会对返回值进行筛选 onBlur={(e: any) => { // 当是选中值的时候，就没有e.target.value，所以需要通过原生获取节点的值 // let value1 = e.target.value // || let value1 = e.target.value || document.getElementsByClassName('wikiName')[0] ?.querySelector('.ant-select-selection-search-input')?.value // console.info(document.getElementsByClassName('wikiName')[0]?.querySelector('.ant-select-selection-search-input')?.value) // 再次设置关键词 if (value1 === '') { form.setFieldsValue({ wikiName: keyword }) } else { setKeyword(value1) form.setFieldsValue({ wikiName: value1 }) } // 绑定值到表单上 }} >{companyList.map((d: any) => ( {d.symbol ? d.symbol.concat(' - ').concat(d.wikiName) : d.wikiName} ))} // 模糊搜索 const getCompany = async (e) => { if (!e) { return false } const params = { wikiName: e, current: 1, size: 10, type: 4, language, } const res = await fetchRelateWikiList(params) setCompanyList(res.data?.records || []) if (res.data?.records.length === 0) { setKeyword(e) } } const [companyList, setCompanyList] = useState([]) //模糊企业搜索下拉 const [keyword, setKeyword] = useState('') //模糊关键词 // 防抖 const debounce = (fn, delay = 1000) => { let timer: any = null // 闭包 return function f(args) { if (timer) clearTimeout(timer) timer = setTimeout(() => { timer = null fn.call(this, args) }, delay) } }大致思路就是上面，也可以直接用代码。 写的时候参考了一些文章，来源找不到了。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |